<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span style="font-size:30px;">装备列表</span>
      <el-button style="float: right; padding: 3px 0" type="text"
        >操作按钮</el-button
      >
    </div>

    <template>
      <el-radio-group 
        v-model="radio"
        @change="radioChangeHandle">
        <el-radio :label="0">全部</el-radio>
        <el-radio :label="1">攻击</el-radio>
        <el-radio :label="2">法术</el-radio>
        <el-radio :label="3">防御</el-radio>
        <el-radio :label="4">移动</el-radio>
        <el-radio :label="5">打野</el-radio>
        <el-radio :label="7">游走</el-radio>
      </el-radio-group>
      <hr />
    </template>

    <el-table
      :data="
        filterTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      :row-class-name="tableRowClassName"
      style="width: 100%"
    >
      <el-table-column prop="date" label="图像" width="120">
        <template slot-scope="scope">
          <el-avatar :size="60">
            <img
              v-bind:src="
                'https://game.gtimg.cn/images/yxzj/img201606/itemimg/' +
                scope.row.item_id +
                '.jpg  '
              "
            />
          </el-avatar>
        </template>
      </el-table-column> 
      <el-table-column prop="item_id" label="装备编号" width="120">
      </el-table-column>
      <el-table-column prop="item_name" label="装备名称" width="120">
      </el-table-column>
      <el-table-column label="装备类型" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.item_type == 1">
            <el-tag effect="dark" type="danger">攻击</el-tag>
          </span>
          <span v-if="scope.row.item_type == 2">
            <el-tag effect="light" type="">法术</el-tag>
          </span>
          <span v-if="scope.row.item_type == 3">
            <el-tag effect="light" type="warning">防御</el-tag>
          </span>
          <span v-if="scope.row.item_type == 4">
            <el-tag effect="light" type="success">移动</el-tag>
          </span>
          <span v-if="scope.row.item_type == 5">
            <el-tag effect="light" type="danger">打野</el-tag>
          </span>
          <span v-if="scope.row.item_type == 7">
            <el-tag effect="light" type="info">游走</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="120"> </el-table-column>
      <el-table-column prop="total_price" label="总价格" width="120">
      </el-table-column>
      <el-table-column prop="des1" label="描述" width="300"> </el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="searchContent" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            @confirm = "handleDelete(scope.$index, scope.row)"
            confirm-button-text="确定"
            cancel-button-text="再想想"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除这行内容吗？"
          >
            <el-button
              slot="reference"
              size="mini"
              type="primary"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-count="pageCount"
      :page-size="pageSize"
      prev-text="上一页"
      next-text="下一页"
      :current-page="currentPage"
    >
    </el-pagination>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableTypeData:[],
      searchContent: "",
      currentPage: 1,
      pageSize: 5,
      pageCount: 1,
      radio: 0
    };
  },
  created() {
    this.query();
  },
  computed: {
    //过滤数据 实现分页和搜索效果
    filterTableData:function() {
      let input = this.searchContent && this.searchContent.toLowerCase();
      let searchItems;
      //搜索 且有结果就返回一个结果数组
      if (input) {
        searchItems = this.tableData.filter(function(item) {
          return Object.keys(item).some(function(key1) {
            return String(item[key1])
              .toLowerCase()
              .match(input);
          });
        });
      } else {
        //不搜索 则返回整个表数据
        searchItems = this.tableTypeData;
      }
      return searchItems;
    }
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 === 1) {
        return "success-row";
      }
      return "";
    },
    query() {
      fetch("http://47.241.102.141:3000/items")
        .then((response) => response.json())
        .then((data) => {
          this.tableData = data;
          this.tableTypeData = this.tableData;
          this.pageCount = Math.ceil(this.tableData.length / this.pageSize);
          console.log(data);
        });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].item_id == row.item_id) {
          this.tableData.splice(i, 1);
          break;
        }
      }
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChange(pageSize) {
      this.currentPage = 1;
      this.pageSize = pageSize;
    },
    commonContent(radioNum) {
      this.currentPage = 1;
      if(radioNum === 0) {
        this.tableTypeData = this.tableData;
      } else {
        this.tableTypeData = [];
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].item_type == radioNum) {
              this.tableTypeData.push(this.tableData[i]);
            }
          }
      }
      this.pageCount = Math.ceil(this.tableTypeData.length / this.pageSize);
    },
    radioChangeHandle() {
      switch (this.radio) {
        case 0:
          this.commonContent(0);
          break;
        case 1:
          this.commonContent(1);
          break;
        case 2:
          this.commonContent(2);
          break;
        case 3:
          this.commonContent(3);
          break;
        case 4:
          this.commonContent(4);
          break;
        case 5:
          this.commonContent(5);
          break;
        case 7:
          this.commonContent(7);
          break;
      }
    }
  },
};
</script>



<style>
.el-table .warning-row {
  /* background: oldlace;
   */
  background-color: white;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table {
  width: 80%;
  margin: 0 auto;
}
</style>